feat(docs): ensnode.io -- refinements to LP & docs#2158
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughThis pull request updates the ENS documentation website with scroll-aware header behavior, consistent emoji repositioning across integration guides, a hero section redesign with new assets, and minor UI refinements including icon additions and sidebar styling adjustments. ChangesDocumentation Site Visual and Content Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/ensnode.io/src/components/overrides/Hero.astro`:
- Around line 8-10: The section containing the background Image component is not
a positioned parent, so the Image with class "absolute w-full h-screen z-0 ..."
may be positioned relative to the page instead of the hero; update the section
element (the one that wraps the Image in Hero.astro) to include "relative" (and
preferably "overflow-hidden") in its class list so the Image's absolute
positioning is anchored to that hero container.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5cb02403-05e3-4072-80d1-572b81d53173
⛔ Files ignored due to path filters (5)
docs/ensnode.io/public/OG_image.pngis excluded by!**/*.pngdocs/ensnode.io/public/Twitter_OG_image.pngis excluded by!**/*.pngdocs/ensnode.io/src/assets/hero_bg_image.pngis excluded by!**/*.pngdocs/ensnode.io/src/assets/hero_image.pngis excluded by!**/*.pngdocs/ensnode.io/src/assets/hero_skies_image.pngis excluded by!**/*.png
📒 Files selected for processing (15)
docs/ensnode.io/config/integrations/starlight/sidebar-topics/integrate.tsdocs/ensnode.io/src/components/molecules/HeaderButtons.tsxdocs/ensnode.io/src/components/molecules/HeaderMobileNavigation.tsxdocs/ensnode.io/src/components/organisms/OmnigraphAPIExample.astrodocs/ensnode.io/src/components/overrides/Hero.astrodocs/ensnode.io/src/content/docs/docs/integrate/index.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/index.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/index.mdxdocs/ensnode.io/src/layouts/Layout.astrodocs/ensnode.io/src/pages/index.astrodocs/ensnode.io/src/scripts/ScrollHeader.jsdocs/ensnode.io/src/styles/onScrollHeader.cssdocs/ensnode.io/src/styles/starlight.css
There was a problem hiding this comment.
Pull request overview
This PR refines the ensnode.io docs site UI/UX (homepage hero/header behaviors + small docs presentation tweaks) to improve navigation polish and consistency across integration pages.
Changes:
- Adjusts header scroll/hover styling (including mobile nav) via new
onScrollContainerbehavior and updated scroll class toggling. - Updates homepage hero visuals/layout and switches hero background asset usage.
- Normalizes “Interactive example” titles/labels across MDX pages and the Starlight sidebar topic config.
Reviewed changes
Copilot reviewed 15 out of 20 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| docs/ensnode.io/src/styles/starlight.css | Prevents non-top-level sidebar items from inheriting bold styling. |
| docs/ensnode.io/src/styles/onScrollHeader.css | Adds hover background behavior for onScrollContainer in scrolled/unscrolled states. |
| docs/ensnode.io/src/scripts/ScrollHeader.js | Toggles scrolled on elements with onScrollContainer for hover styling changes on scroll. |
| docs/ensnode.io/src/pages/index.astro | Tweaks homepage section spacing/padding around JoinTelegram. |
| docs/ensnode.io/src/layouts/Layout.astro | Updates the preloaded hero background image asset. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/index.mdx | Renames LinkCard title for the interactive example. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx | Renames page title for interactive enssdk example. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/index.mdx | Renames LinkCard title for the interactive example. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx | Renames page title for interactive enskit example. |
| docs/ensnode.io/src/content/docs/docs/integrate/index.mdx | Renames LinkCard titles for interactive examples. |
| docs/ensnode.io/src/components/overrides/Hero.astro | Redesigns hero layout and button styling; updates hero images. |
| docs/ensnode.io/src/components/organisms/OmnigraphAPIExample.astro | Adds an icon to the “Back to Examples” link styling. |
| docs/ensnode.io/src/components/molecules/HeaderMobileNavigation.tsx | Adds isScrollable prop and applies onScrollContainer class for scroll-aware hover styling. |
| docs/ensnode.io/src/components/molecules/HeaderButtons.tsx | Applies onScrollContainer class to header links when scrollable; passes prop to mobile navigation. |
| docs/ensnode.io/config/integrations/starlight/sidebar-topics/integrate.ts | Updates sidebar labels for interactive examples to match new wording. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
…/feat/ensnodeio-new-lp-background
Greptile SummaryThis PR delivers UI/UX refinements to the ENSNode landing page and documentation site, following updated Figma designs. The hero section is fully redesigned with a split layout (headline/CTA on the left, ENSv2 badge image on the right), a new background image, and improved responsive behaviour. The scroll-aware header gains theme-correct hover and focus-visible styles for buttons and the mobile hamburger on both transparent and scrolled backgrounds.
Confidence Score: 5/5Pure UI/UX changes with no logic affecting data, APIs, or build output — safe to merge. All changes are confined to the presentation layer: Astro components, CSS, a small JS observer extension, MDX frontmatter titles, and image assets. The scroll-aware header refactor follows the existing onScrollElement pattern exactly, the hero redesign is self-contained, and the docs label changes are trivial text moves. No shared logic, no API surface, and the author confirmed typecheck, lint, and test passes locally and in CI. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Page Load] --> B{On landing page?}
B -- Yes --> C[isScrollable = true]
B -- No --> D[isScrollable = false]
C --> E[Header buttons & hamburger\nget class: onScrollContainer]
D --> F[Header buttons & hamburger\nget class: hover:bg-black/5\nfocus-visible:outline-black]
E --> G[ScrollHeader.js\nIntersectionObserver watches\nscrollWatcher div]
G --> H{Hero section\nintersecting?}
H -- Yes: at top --> I[No .scrolled class\nonScrollContainer hover = white/5\nfocus outline = white]
H -- No: scrolled down --> J[.scrolled added\nonScrollContainer hover = black/5\nfocus outline = black]
Reviews (5): Last reviewed commit: "Apply ai assistant's suggestions, pt.3" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <a href="/docs/integrate/omnigraph/examples">Back to Examples</a> | ||
| </p> | ||
| <a class="group w-fit flex flex-row justify-start items-center gap-2" href="/docs/integrate/omnigraph/examples"> | ||
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> |
There was a problem hiding this comment.
--sl-color-white is hardcoded to #ffffff in Starlight regardless of the active theme. In light mode the docs page background is near-white, so the icon becomes invisible on hover (white icon on a white/light surface). The default state — text-[var(--sl-color-accent)] — is theme-aware and visible in both modes; a consistent hover could use group-hover:text-[var(--sl-color-accent-high)] or group-hover:opacity-80 instead of switching to white.
There was a problem hiding this comment.
That's not true. The hover is not set up correctly (see the attached screenshot), and the variable is set to a dark (near-black) color, not white.
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@Y3drk Great to see these updates. Thank you! 👍
Lite PR → ensnode.io -- refinements to LP & docs
Summary
Why
Testing
typecheck,lint, andtestcommands locally to ensure that the migration didn't break anything, and later confirmed that in our CI workflowNotes for Reviewer (Optional)
Pre-Review Checklist (Blocking)